<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body class="gray-bg">

<style type="text/css">
	.progress{
		margin-bottom:0px !important ;	
	}	
</style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
			
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-desktop"></i> 存储统计</h4>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
							<div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-primary"><i class="fas fa-swatchbook"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">发送总数 </span>
                                        <span class="info-box-number">[[${requestCount}]] 次</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-yellow">
                                    	<i class="fas fa-sms"></i>
                                    </span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">发送成功</span>
                                        <span class="info-box-number">[[${fileCount}]] 条</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-red"><i class="fas fa-ambulance"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">待处理 </span>
                                        <span class="info-box-number">140 条</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            
                        </div>
                     
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
           	
           	<div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><i class="fas fa-hdd"></i> 最新预警</h5>
                    </div>
                     <div class="ibox-content" style="padding-top:0px;">
                     	<div class="list-group">
						  <a href="#" class="list-group-item active">18-10 12:45 发送短信xxxxx失败</a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">42</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">4</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">12</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">4</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 发送短信xxxxx失败 <span class="badge">12</span></a>
						</div>
                    </div>
                </div>
            </div>
             
        </div>
        
        <div class="col-sm-12"> 
        	<div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5><i class="fas fa-paper-plane"></i> 系统CPU</h5>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins monitor-table">
                                <thead>
                                    <tr>
                                        <th width="35%">属性</th>
                                        <th>值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>核心数</td>
                                        <td th:text="${server.cpu.cpuNum}">0个</td>
                                    </tr>
                                    <tr>
                                        <td>用户使用率 (<span th:text="${server.cpu.used+'%'}"></span>)</td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.cpu.used gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.cpu.used}" 
											  		th:text="${server.cpu.used}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.cpu.used + '%'}">
											  </div>
											</div> 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>系统使用率 (<span th:text="${server.cpu.sys+'%'}"></span>)</td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.cpu.sys gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.cpu.sys}" 
											  		th:text="${server.cpu.sys}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.cpu.sys+ '%'}">
											  </div>
											</div> 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>当前空闲率 (<span th:text="${server.cpu.free+'%'}"></span>)</td>
                                        <td>
                                        
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.cpu.free lt 20} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.cpu.free}" 
											  		th:text="${server.cpu.free}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.cpu.free + '%'}">
											  </div>
											</div> 
											
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5><i class="fas fa-microchip"></i> 系统内存</h5>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins monitor-table">
                                <thead>
                                    <tr>
                                        <th>属性</th>
                                        <th>内存 <span class="label-text">([[${server.mem.usage}]]%)</span></th>
                                        <th>JVM <span class="label-text">([[${server.jvm.usage}]]%)</span></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>总内存</td>
                                        <td th:text="${server.mem.total + 'G'}">0GB</td>
                                        <td th:text="${server.jvm.total + 'M'}">0MB</td>
                                    </tr>
                                    <tr>
                                        <td>已用内存</td>
                                        <td th:text="${server.mem.used + 'G'}">0GB</td>
                                        <td th:text="${server.jvm.used + 'M'}">0MB</td>
                                    </tr>
                                    <tr>
                                        <td>剩余内存</td>
                                        <td th:text="${server.mem.free + 'G'}">0GB</td>
                                        <td th:text="${server.jvm.free + 'M'}">0MB</td>
                                    </tr>
                                    <tr>
                                        <td>使用率</td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.mem.usage gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.mem.usage}" 
											  		th:text="${server.mem.usage}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.mem.usage+ '%'}">
											  </div>
											</div> 
                                        </td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.jvm.usage gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.jvm.usage}" 
											  		th:text="${server.jvm.usage}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.jvm.usage+ '%'}">
											  </div>
											</div> 
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	<script th:src="@{${cdn}+'/asserts/ajax/libs/report/echarts/echarts-all.js'}"></script>

    <script type="text/javascript">
	    $(function () {

	        // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
	        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
	        var lineoption = {
	            title : {
	                text: '趋势图'
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['最高访问量','最低访问量']
	            },
	            grid:{
	                x:40,
	                x2:40,
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    boundaryGap : false,
	                    data : [
	                    	'1','2','3','4','5','6','7' ,
	                    	'8','9','10','11','12','13','14' ,
	                    	'15','16','17','18','19','20','21' ,
	                    	'22','23','24','25','26','27','28'
	                    	]
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value',
	                    axisLabel : {
	                        formatter: '{value} °C'
	                    }
	                }
	            ],
	            series : [
	                {
	                    name:'最高访问量',
	                    type:'line',
	                    data:[
	                    	11, 11, 15, 13, 12, 13, 40,
	                    	181, 15, 15, 83, 99, 13, 10,
	                    	191, 17, 95, 13, 92, 43, 30,
	                    	12, 131, 15, 73, 62, 13, 10
	                    	],
	                    markPoint : {
	                        data : [
	                            {type : 'max', name: '最大值'},
	                            {type : 'min', name: '最小值'}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name: '平均值'}
	                        ]
	                    }
	                },
	                {
	                    name:'最低访问量',
	                    type:'line',
	                    data:[
	                    	11, 11, -5, 13, 12, 13, 40,
	                    	121, 15, -15, 43, 69, 13, -10,
	                    	141, -17, 95, -13, 92, 43, 30,
	                    	12, 121, 15, 73, 62, -13, -10
	                    	],
	                    markPoint : {
	                        data : [
	                            {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name : '平均值'}
	                        ]
	                    }
	                }
	            ]
	        };
	        lineChart.setOption(lineoption);
	        $(window).resize(lineChart.resize);
	        
	    });
    </script>

</body>
</html>

